<template>
	<!-- 20230421 -->
	<view class="layer-choose-store-cn">

		<ty-layer-pop-up v-if="show" @overlayClick="close">
			<!-- 浮层内容 -->
			<view class="layer-content bg-ff" @click.stop="">

				<view class="">
					<!-- 标题 -->
					<view class="padding-top-40 padding-bottom-35 text-center text-36 text-bold">
						选择自提地址
					</view>

					<!-- 门店列表 -->
					<scroll-view class="scroll-view" scroll-y="true">
						<view class="padding-tb-30 padding-lr-40" v-for="(item,index) in list" :key="index">
							<!-- 门店信息 -->
							<view class="flex align-center">
								<view class="flex-one margin-right-40 text-28 text-33 text-cut-one">{{item.name}}</view>
								<text class="text-40"
									:class="selectedId === item.id ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc'"
									@click.stop="choose(item.id)"></text>
							</view>

							<view class="margin-top-15 line-height-40 flex">
								<view class="flex-one text-28 text-aa text-cut-one">{{item.address}}{{item.address}}
								</view>
								<view class="text-right text-28 text-4d" style="width: 120rpx;">
									{{item.distance}}km
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 底部栏 -->
				<view class="jc-footer-safe bg-ff">
					<view
						class="padding-lr-30 padding-tb-10">
						<view class="width-100p line-height-90 radius-45 bg-main text-center text-32 text-bold text-ff" @click="confirm()">
							确定
						</view>
					</view>

				</view>
			</view>
		</ty-layer-pop-up>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedId: ''
			}
		},
		props: {
			// 是否显示浮层
			show: {
				type: Boolean,
				default: false
			},
			// 门店列表
			list: {
				type: Array,
				default: []
			},
			// 默认选中门店
			// storeId:{
			// 	type: [String,Number],
			// 	default: ''
			// }
		},
		methods: {
			/**
			 * 关闭浮层
			 * @date 2022-11-17
			 */
			close: function() {
				this.$emit("update:show", false)
			},

			/**
			 * 切换门店
			 * @date 2022-11-17
			 */
			choose(id) {
				this.selectedId = id
			},

			/**
			 * 点击确认按钮
			 * @param {Object} type
			 */
			confirm: function(type) {
				if (!this.selectedId) {
					this.cn.toast('请选择自提门店')
					return false
				}

				this.$emit('confirm', {
					storeId: this.selectedId
				});
			}
		}
	}
</script>

<style scoped>
	/* 浮层内容 */
	.layer-content {
		position: fixed;
		width: 100%;
		max-height: calc(90vh);
		left: 0;
		bottom: 0;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
	}

	/* 门店列表 */
	.scroll-view {
		width: 100%;
		/* 最大高度 - 底部条高度 - 安全距离 */
		max-height: calc(90vh - 110rpx - env(safe-area-inset-bottom));
	}
</style>